<template>
	<view class="body">
		<!-- tabber 切换 -->
		<swiper-tab-head
		:tabBars="tabBars"
		:tabIndex="tabIndex"
		@changeIndex="tabtap"
		scrollItemStyle="width:33%;"
		scrollStyle="border-bottom: 0;">
		</swiper-tab-head>
		<!-- 好友列表 -->
		<!-- <block v-for="(item, index) in list" :key="index">
			<user-list :item="item"></user-list>
		</block> -->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height: swiperHeight + 'px'}" :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(items, key) in newList" :key="key">
					<scroll-view scroll-y class="list" @scrolltolower="loadMore(key)">
						<template v-if="items.list.length>0">
							<!-- 图文列表 -->
							<block v-for="(item, index) in items.list" :key="index">
								<user-list :item="item"></user-list>
							</block>
							<!-- 上拉加载 -->
							<load-more :loadText="items.loadText"></load-more>
						</template>
						<template v-else>
							<!-- 无内容默认 -->
							<no-thing></no-thing>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import swiperTabHead from '../../components/index/swiper-tab-head.vue'
	import userList from '../../components/user-list/user-list.vue'
	import loadMore from '../../components/common/load-more.vue'
	import noThing from '../../components/common/no-thing.vue'
	export default {
		data() {
			return {
				swiperHeight: 500,
				tabIndex: 0,
				tabBars: [
					{ name: '互关', id: 'huguan', num: 10 },
					{ name: '关注', id: 'guanzhu', num: 20 },
					{ name: '粉丝', id: 'fensi', num: 14 },
				],
				newList: [
					{
						loadText: '上拉加载更多',
						list: [
							{
								userpic: '../../static/logo.png',
								username: '昵称11111111111',
								age: 20,
								sex: 0,
								isguanzhu: true
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称111',
								age: 21,
								sex: 1,
								isguanzhu: false
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 21,
								sex: 1,
								isguanzhu: false
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 20,
								sex: 0,
								isguanzhu: true
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 21,
								sex: 1,
								isguanzhu: false
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 21,
								sex: 1,
								isguanzhu: false
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 20,
								sex: 0,
								isguanzhu: true
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 21,
								sex: 1,
								isguanzhu: false
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 21,
								sex: 1,
								isguanzhu: false
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 20,
								sex: 0,
								isguanzhu: true
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 21,
								sex: 1,
								isguanzhu: false
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 21,
								sex: 1,
								isguanzhu: false
							},
						],
					},
					{
						loadText: '上拉加载更多',
						list: [
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 20,
								sex: 0,
								isguanzhu: true
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 21,
								sex: 1,
								isguanzhu: false
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 21,
								sex: 1,
								isguanzhu: false
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 20,
								sex: 0,
								isguanzhu: true
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 21,
								sex: 1,
								isguanzhu: false
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 21,
								sex: 1,
								isguanzhu: false
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 21,
								sex: 1,
								isguanzhu: false
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 20,
								sex: 0,
								isguanzhu: true
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 21,
								sex: 1,
								isguanzhu: false
							},
						],
					},
					{
						loadText: '上拉加载更多',
						list: [
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 20,
								sex: 0,
								isguanzhu: true
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 21,
								sex: 1,
								isguanzhu: false
							},
							{
								userpic: '../../static/logo.png',
								username: '昵称',
								age: 20,
								sex: 0,
								isguanzhu: true
							},
						],
					},
				]
				
			}
		},
		components: {
			swiperTabHead,
			userList,
			loadMore,
			noThing,
		},
		onLoad() {
			// API -> 系统信息 -> 获取可使用窗口高度
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100)
					this.swiperHeight = height
				}
			})
		},
		onNavigationBarButtonTap(e) { // 监听导航按钮点击事件
			// console.log(e.index)
			if (e.index === 0) {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		methods: {
			tabtap(index) { // 顶部滑块点击事件
				this.tabIndex = index
			},
			tabChange(e) { // 中间滑块滑动改变事件
				this.tabIndex = e.detail.current
			},
			loadMore(index) { // 上拉加载
				if (this.newList[index].loadText !== '上拉加载更多') return
				// 修改状态
				this.newList[index].loadText = '加载中...'
				// 获取数据
				setTimeout(() => {
					// 获取完成
					let obj = {
							userpic: '../../static/logo.png',
							username: '昵称11111',
							age: 20,
							sex: 0,
							isguanzhu: true
						}
					this.newList[index].list.push(obj)
					this.newList[index].loadText = '上拉加载更多'
				}, 1000)
				// this.newList[index].loadText = '没有更多数据了'
			}
		}
	}
</script>

<style lang="scss" scoped>
// .body {
// 	padding: 0 20rpx;
// }
</style>
